<template>
    <div class="screen-nav">
        <div class="nav-item" :class="{active:navItem.id == navCurrentId}" v-for="navItem in navList" :key="navItem.id" @click="getTopic(navItem.id)">
            <span v-text="navItem.topic"></span>
        </div>
    </div>
</template>
<script>
import api from '@/utils/api';
import { mapGetters } from 'vuex'
// 事件
import delegate from '../js/event.js'

export default {
    data() {
        return {
        }
    },
    computed: {
        ...mapGetters(['navList','navCurrentId'])
    },
    created() {
        // 左侧主题领域列表
        this.getNav();
    },
    methods: {
        getNav(){
            this.$store.dispatch('getNav').then(()=>{
                //this.$router.replace('/screen/technology');
                delegate.$emit('s-resize');
            })
        },
        getTopic(topicId){
            this.$store.commit('SET_CURRENT',topicId);
            delegate.$emit('s-resize');
        }
    },
}
</script>
<style lang="scss">

        .screen-nav{
            display: flex;
            flex-direction: column;
            background: linear-gradient(90deg,#053393,#055793);
            .nav-item{
                position: relative;
                display: flex;
                align-items: center;
                flex: 0 0 40px;
                justify-content: center;
                cursor: pointer;
                span{
                    font-size: 15px;
                    color: #fff;
                }
                &.active{
                    background-color: #0066ff;
                }
                &::after{
                    position: absolute;
                    content: '';
                    bottom: 0;
                    left: 0;
                    right: 0;
                    border-bottom: 1px solid #213391;
                }
            }
        }

</style>
